<template>
  <div id="app">
    <div
      class="head"
      v-if="navshow"
      v-show="$route.name !== 'search' && $route.name !== 'detail_search'"
    >
      <div class="head_k">
        <div class="header-left">
          <img style="cursor:pointer" src="./assets/image/logo.png" @click="toindex" alt />
        </div>
        <div class="header-right">
          <div class="header-right-top">
            <div class="search">
              <img @click="sousuo()" src="./assets/image/search.png" alt />
            </div>
            <div class="login_k">
              <div class="login">
                <p v-show="!hide" @click="showDialog">登录</p>
                <p v-show="hide" @click="telphone">{{ admin }}</p>
                <p v-show="hide" @click="loginout" style="margin-left:15px;">注销</p>
                <span></span>
                <p @click="regist">注册</p>
                <span></span>
                <p>
                  <router-link to="/lianxiwomen">联系我们</router-link>
                </p>
              </div>
            </div>
            <div class="lang">
              <p>中文</p>
              <span></span>
              <p @click="toEnglish">English</p>
            </div>
          </div>

          <ul class="header-right-bottom">
            <li @click="jump1(1)" class="activeli">
              <span>首页</span>
            </li>
            <li class="activeli" @mouseover="onMouseOver2" @mouseout="onMouseout2">
              <span @click="jumpgaishu(1)" :style="border2">概述</span>

              <summaryz v-show="seen2" @childByvalue2="childByvalue2"></summaryz>
            </li>

            <li class="activeli" @mouseover="onMouseOver3" @mouseout="onMouseout3">
              <span @click="jump3(3)" :style="border3">资讯</span>
              <div class="boxchilde">
                <consult v-show="seen3" @childByvalue3="childByvalue3"></consult>
              </div>
            </li>

            <li class="activeli" @mouseover="onMouseOver4" @mouseout="onMouseout4">
              <span @click="jumpzhanlan(1)" :style="border">展览</span>
              <div>
                <show v-show="seen" @childByvalue="childByvalue"></show>
              </div>
            </li>
            <li class="activeli" @mouseover="onMouseOver5" @mouseout="onMouseout5">
              <span @click="jumphd(3)" :style="border5">活动</span>
              <div class="boxchilde">
                <activity v-show="seen5" @childByvalue5="childByvalue5"></activity>
              </div>
            </li>
            <li class="activeli" @mouseover="onMouseOver6" @mouseout="onMouseout6">
              <router-link to="/cangpinxinshang">
                <span :style="border6">典藏</span>
              </router-link>
              <!-- <div class="boxchilde">
                <book v-show="seen6" @childByvalue6="childByvalue6"></book>
              </div>-->
            </li>
            <li class="activeli" @mouseover="onMouseOver7" @mouseout="onMouseout7">
              <span @click="jumpzl(1)" :style="border7">专栏</span>
              <div class="boxchilde">
                <column v-show="seen7" @childByvalue7="childByvalue7"></column>
              </div>
            </li>
            <li class="activeli" @mouseover="onMouseOver8" @mouseout="onMouseout8">
              <span @click="jumpxs(1)" :style="border8">学术</span>
              <div class="boxchilde">
                <learning v-show="seen8" @childByvalue8="childByvalue8"></learning>
              </div>
            </li>
            <li class="activeli" @mouseover="onMouseOver9" @mouseout="onMouseout9">
              <router-link to="/wenchuang">
                <span :style="border9">文创</span>
              </router-link>
            </li>
          </ul>
        </div>
      </div>
    </div>

    <login v-if="navshow" :bool="loginshow" @loginchild="loginchild"></login>
    <linav v-if="navshow"></linav>
    <keep-alive>
      <router-view style="min-width:1200px" v-if="$route.meta.keepAlive"></router-view>
    </keep-alive>
    <router-view style="min-width:960px" v-if="!$route.meta.keepAlive"></router-view>
  </div>
</template>

<script>
import enApp from "./components/English/enApp";
import linav from "./components/index_parent/linav";
import show from "./components/show";
import summaryz from "./components/summaryz";
import consult from "./components/consult";
import activity from "./components/activity";
import learning from "./components/learning";
// import book from "./components/book";
import column from "./components/column";
import login from "./components/login/login";
import { mapState, mapActions } from "vuex";
export default {
  name: "App",

  data() {
    return {
      loginshow: "",
      nav_show: true,
      admin: "",
      hide1: true,
      zixunshow: "true",
      choose: 1,
      seen: false,
      seen2: false,
      seen3: false,
      seen5: false,
      seen6: false,
      seen7: false,
      seen8: false,
      seen9: false,
      down: {
        transform: "",
      },

      h: {
        height: 0,
      },
      fade: {
        transition: "",
        opacity: "",
      },
      border: {
        borderBottom: "",
      },
      border2: {
        borderBottom: "",
      },
      border3: {
        borderBottom: "",
      },
      border5: {
        borderBottom: "",
      },
      border6: {
        borderBottom: "",
      },
      border7: {
        borderBottom: "",
      },
      border8: {
        borderBottom: "",
      },
      border9: {
        borderBottom: "",
      },
    };
  },
  mounted() {
    this.loadgetmuseum();
  },

  components: {
    enApp: enApp,
    linav: linav,
    show: show,
    summaryz: summaryz,
    consult: consult,
    learning: learning,

    column: column,
    activity: activity,
    login: login,
  },
  methods: {
    ...mapActions(["isShow", "nav_Hide"]),
    loginchild(val) {
      this.logshow = val;
    },
    toEnglish() {
      this.nav_Hide();

      this.$router.push(`/enApp/Home`).catch((err) => {
        err;
      });
    },

    sousuo() {
      let routeData = this.$router.resolve({
        name: "search",

        params: { id: "2" },
      });
      window.open(routeData.href, "_blank");
    },
    regist() {
      this.$router.push(`/regist`).catch((err) => {
        err;
      });
    },
    showDialog() {
      this.isShow();
      // this.$store.commit('show',true)
      // console.log(this.showLogin,"222")
    },
    dialogVisible() {
      this.showDialog = false;
    },
    show() {
      this.showDialog = true;
    },
    enter() {
      this.h.height = "363px";

      this.down.transform = "rotateZ(180deg)";
    },
    out() {
      this.h.height = 0;
    },
    onMouseOver2() {
      this.seen2 = true; //鼠标移入显示

      this.border2.borderBottom = "3px solid rgb(0,54,103)";
    },
    onMouseout2() {
      this.seen2 = false;
      this.border2.borderBottom = "";
    },
    onMouseOver3() {
      this.seen3 = true; //鼠标移入显示

      this.border3.borderBottom = "3px solid rgb(0,54,103)";
    },
    onMouseout3() {
      this.seen3 = false;
      this.border3.borderBottom = "";
    },
    onMouseOver4() {
      this.seen = true; //鼠标移入显示
      this.border.borderBottom = "3px solid rgb(0,54,103)";
    },
    onMouseout4() {
      this.seen = false; //鼠标移入显示
      this.border.borderBottom = "";
    },
    onMouseOver5() {
      this.seen5 = true; //鼠标移入显示
      this.border5.borderBottom = "3px solid rgb(0,54,103)";
    },
    onMouseout5() {
      this.seen5 = false;
      this.border5.borderBottom = "";
    },
    onMouseOver6() {
      // this.seen6 = true; //鼠标移入显示
      this.border6.borderBottom = "3px solid rgb(0,54,103)";
    },
    onMouseout6() {
      // this.seen6 = false;
      this.border6.borderBottom = "";
    },
    onMouseOver7() {
      this.seen7 = true; //鼠标移入显示
      this.border7.borderBottom = "3px solid rgb(0,54,103)";
    },
    onMouseout7() {
      this.seen7 = false;
      this.border7.borderBottom = "";
    },
    onMouseOver8() {
      this.seen8 = true; //鼠标移入显示
      this.border8.borderBottom = "3px solid rgb(0,54,103)";
    },
    onMouseout8() {
      this.seen8 = false;
      this.border8.borderBottom = "";
    },
    onMouseOver9() {
      // this.seen9 = true; //鼠标移入显示
      this.border9.borderBottom = "3px solid rgb(0,54,103)";
    },
    onMouseout9() {
      // this.seen9 = false;
      this.border9.borderBottom = "";
    },
    childByvalue(val) {
      this.seen = val;
    },
    childByvalue2(val) {
      this.seen2 = val;
    },
    childByvalue3(val) {
      this.seen3 = val;
    },
    //     childByvalue4(val) {
    //   this.seen4 = val;
    // },
    childByvalue5(val) {
      this.seen5 = val;
    },
    // childByvalue6(val) {
    //   this.seen6 = val;
    // },
    childByvalue7(val) {
      this.seen7 = val;
    },
    childByvalue8(val) {
      this.seen8 = val;
    },
    jump1(i) {
      this.choose = i;
      this.$router.push(`/`).catch((err) => {
        err;
      });
    },
    jumpgaishu(i) {
      this.seen2 = false;
      this.choose = i;
      this.$router
        .push({
          path: "/lindaojieshao/lindaojieshao2/:id",
          query: { orderId: 1 },
        })
        .catch((err) => {
          err;
        });
    },
    jump3(i) {
      this.seen3 = false;
      this.$router
        .push({
          path: "/guanwugongkai/guanwugongkai2/:id",
          query: { orderId: "新闻资讯", zixun: "xinwenzixun" },
        })
        .catch((err) => {
          err;
        });
    },
    jumpzhanlan(i) {
      this.seen = false;

      this.$router
        .push({
          path: "/linzhan/basez/:id",
          query: { orderId: "基本陈列" },
        })
        .catch((err) => {
          err;
        });
    },
    jumphd(i) {
      this.seen5 = false;
      this.$router
        .push({
          path: "/huodongyugao/huodongyugao2/:id",
          query: { orderId: "活动预告" },
        })
        .catch((err) => {
          err;
        });
    },
    jumpzl(i) {
      this.seen7 = false;
      this.$router
        .push({
          path: "/zhidujianshe/zhiyuanzhezhijia/:id",
          query: { orderId: "志愿者之家" },
        })
        .catch((err) => {
          err;
        });
    },
    toindex() {
      this.$router
        .push({
          path: "/",
        })
        .catch((err) => {
          err;
        });
    },
    jumpxs(i) {
      this.seen8 = false;
      this.$router
        .push({
          path: "/ketiyanjiu/ketiyanjiu2/:id",
          query: { orderId: "学术成果", xueshu: "xueshuchengguo" },
        })
        .catch((err) => {
          err;
        });
    },
    loadgetmuseum() {
      //这个接口判断是否登录，登录成功会显示当前账户的手机号
      this.$api.post(`${this.zs}/live/user/profile`).then((res) => {
        // console.log(res.data, 111);
        // 成功
        if (res.data.code == "OK") {
          this.admin = res.data.data;
          // console.log(this.admin, 111);
          this.setIsLogin(true);
        } else {
          this.setIsLogin(false);
        }
      });
    },
    loginout() {
      // localStorage.clear();
      this.$api.post(`${this.zs}/live/logout`).then((res) => {
        localStorage.removeItem("token");
        this.$store.commit("setIsLogin", false);
        this.hide1 = true;
        // this.$router
        //   .push({
        //     path: "/",
        //   })
        //   .catch((err) => {
        //     err;
        //   });
      });
    },
    setIsLogin(value) {
      this.$store.commit("setIsLogin", value);
    },
    telphone() {
      this.$router
        .push({
          path: "/vip",
        })
        .catch((err) => {
          err;
        });
    },
  },
  //  watch: {
  //   hide(value){
  //   this.loadgetmuseum();
  //   }
  // },
  // computed: {
  //    ...mapState(["showLogin"]),
  //    hide(){
  //     return this.$store.state.isLogin;
  //   }
  // },
  watch: {
    hide(value) {
      this.loadgetmuseum();
    },
  },
  computed: {
    ...mapState(["showLogin", "navshow"]),
    hide() {
      return this.$store.state.isLogin;
    },
  },
};
</script>
<style scoped>
#app {
  position: relative;
}
a {
  text-decoration: none;
  color: #999999;
}
.login a {
  color: #cbcbcb;
}
.atag {
  color: rgb(153, 153, 153);
  width: 60px;
  text-align: center;
  height: 32px;
  text-decoration: none;
  display: inline-block;
}
p,
ul,
li {
  margin: 0px;
  padding: 0px;
  cursor: pointer;
}
#app {
  position: relative;
}
.head {
  width: 100%;
}
.head_k {
  display: flex;
  width: 1175px;
  margin: auto;
  padding-top: 20px;
  height: 100px;
  justify-content: space-between;
  box-sizing: border-box;
}
.header-left {
  width: 400px;
}
.header-right {
  display: flex;
  flex-direction: column;
}
.header-right-top {
  display: flex;
  width: 100%;
  margin-bottom: 10px;
  justify-content: flex-end;
  padding-right: 12px;
  box-sizing: border-box;
}
.header-right-top {
  font-size: 16px;
}
.search,
.login,
.lang {
  display: flex;
}
.search img {
  width: 20px;
  height: 20px;
  cursor: pointer;
}
#search_input {
  border-radius: 100px;
  outline: none;
  height: 20px;
  width: 170px;
  padding: 10px 10px;
  box-sizing: border-box;
  border: 1px solid rgb(203, 203, 203);
  margin-right: 10px;
}
.login span,
.lang span {
  width: 2px;
  height: 16px;
  background: rgb(203, 203, 203);
  display: inline-block;
  margin: 2px 12px;
}
.login > p,
.lang > p {
  margin: 0px;
  color: rgb(203, 203, 203);
}
.login,
.search {
  margin-right: 15px;
}
.header-right-bottom {
  display: flex;
}
.header-right-bottom li span {
  display: block;
  width: 60px;
  text-align: center;
  height: 30px;
  font-size: 16px;
  /* border-bottom: 3px solid red; */
}

.header-right-bottom li {
  list-style: none;
  color: rgb(153, 153, 153);
  width: 90px;
  display: flex;
  justify-content: flex-end;
  height: 50px;
  z-index: 99;
  cursor: pointer;
  margin-left: 20px;
  border: 1px solid rgba(200, 200, 200, 0.01);
}

.activeli:hover .help {
  border-bottom: 3px solid rgb(0, 54, 103);
  display: block;
}
.help {
  display: none;
}
/* =========== */
</style>
